<template>
  <div class="list-box">
    <div class="list-tabs">
      <div
        class="item"
        v-for="(item, index) in tabList"
        :key="item.id"
        :class="{ select: selectedIndex === index }"
        @click="changeTab(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="list-echart">
      <table class="table-header">
        <thead>
          <th style="width: 80px">排名</th>
          <th style="width: 500px">纳税人名称</th>
          <th style="width: 400px">开具发票金金额(万元)</th>
          <th style="width: 200px">同期金额(万元)</th>
          <th style="width: 500px">幅度(%)</th>
        </thead>
      </table>
      <vue-seamless-scroll
        :data="swiperList"
        :class-option="classOption"
        class="table-content"
      >
        <div
          class="scrollItem"
          v-for="(item, index) in swiperList"
          :key="index"
        >
          <div style="width: 40px; text-align: center" v-if="index <= 2">
            <img
              src="~@/assets/images/icon-px-one.png"
              style="width: 21px; height: 17px"
              v-if="index === 0"
            />
            <img
              src="~@/assets/images/icon-px-two.png"
              style="width: 21px; height: 17px"
              v-if="index === 1"
            />
            <img
              src="~@/assets/images/icon-px-three.png"
              style="width: 21px; height: 17px"
              v-if="index === 2"
            />
          </div>

          <div class="scrollIndex" style="width: 40px" v-if="index > 2">
            {{ index + 1 }}
          </div>
          <div class="scrollName" v-text="item.qymc"></div>
          <div class="scrollKjje" v-text="item.djrq"></div>
          <div class="scrollTqje" v-text="item.bnsbje"></div>
          <div class="scrollFd" v-text="item.rkje"></div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
    
<script>
import Title from "@/components/title";

export default {
  name: "fpqk",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      tabList: [
        { id: 0, name: "密云区发票前20名" },
        { id: 1, name: "密云区发票同比增长前20名" },
        { id: 3, name: "密云区发票同比下降前20名" },
        { id: 4, name: "密云区商品编码前20名" },
      ],
      swiperList: [],
      classOption: {
        limitMoveNum: 1, // 开启无缝滚动的数据量
        singleHeight: 100,
        waitTime: 0,
        step: 0.5,
        hoverStop: true,
      },
      selectedIndex: 0, //当前被选中的tab页索引
      resData: [], //查询回来的原始数据
      EchartData: [], // 图表数据
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.mockData();
    this.changeTab(0);
  },
  methods: {
    //初始化模拟数据
    mockData() {
      //左侧轮播表格模拟数据
      this.swiperList = [
        {
          qymc: "北京市芳飞出租汽车有限责任公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京市国宾大厦有限责任公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京宇航高科新材料有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京市长阳农场有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京燕工工程技术开发中心",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京首钢文化发展有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京市芳飞出租汽车有限责任公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京市国宾大厦有限责任公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京宇航高科新材料有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京市长阳农场有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京燕工工程技术开发中心",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京首钢文化发展有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京市芳飞出租汽车有限责任公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京市国宾大厦有限责任公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京宇航高科新材料有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京市长阳农场有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京燕工工程技术开发中心",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
        {
          qymc: "北京首钢文化发展有限公司",
          djrq: "2023-03-08",
          bnsbje: 1234,
          rkje: 5678,
        },
      ];
      //右侧图标模拟数据
      this.echartRightData = [
        [
          {
            name: "行业1",
            value: 12331,
          },
          {
            name: "行业2",
            value: 22331,
          },
          {
            name: "行业3",
            value: 16331,
          },
          {
            name: "行业4",
            value: 14561,
          },
        ],
        [
          {
            name: "税种1",
            value: 22331,
          },
          {
            name: "税种2",
            value: 22331,
          },
          {
            name: "税种3",
            value: 36331,
          },
          {
            name: "税种4",
            value: 34561,
          },
        ],
        [
          {
            name: "区局1",
            value: 42331,
          },
          {
            name: "区局2",
            value: 22331,
          },
          {
            name: "区局3",
            value: 56331,
          },
          {
            name: "区局4",
            value: 24561,
          },
        ],
      ];
    },

    //切换tab页,同时切换数据
    changeTab(index) {
      this.selectedIndex = index;
    },
  },
};
</script>
    
<style lang="scss" scoped >
.list-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.list-tabs {
  display: flex;
  width: 100%;
  height: 10%;
  margin-left: 20px;
  .item {
    flex: 1;
    color: #a1d2ff;
    font-size: 17px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }
  .select {
    color: #fff;
    font-size: 19px;
    background-image: url("~@/assets/images/bg-22.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0px 30px;
  }
}
.list-echart {
  width: 100%;
  height: 90%;
  margin-left: 20px;

  .table-header {
    height: 20px;
    padding: 5px 5px 5px 0px;
    overflow: hidden;
    th {
      color: #52a5db;
      font-size: 16px;
      font-weight: 500;
    }
  }
  .table-content {
    padding: 20 40px;
    flex: 0 0 256px;
    height: 100%;
    overflow: hidden;
    .scrollItem {
      display: flex;
      align-items: center;
      height: 40px;
      background-image: url("~@/assets/images/bg-23.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0px 0px;

      &:nth-child(2n + 1) {
        background: linear-gradient(
          to right,
          transparent,
          rgba(36, 121, 199, 0.5),
          transparent
        );

        background-image: url("~@/assets/images/bg-23.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0px 0px;
      }
      .scrollIndex {
        font-size: 10px;
        color: #e4cb2c;
        text-align: center;
      }
      .scrollName {
        margin-left: 45px;
        padding: 0 12px;
        width: 320px;

        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-emphasis: ellipsis;
        font-size: 16px;
        color: #ffffff;
      }
      .scrollKjje {
        flex: 1;
        text-align: left;
        color: #2ecebe;
      }
      .scrollTqje {
        flex: 1;
        text-align: left;
        color: #ebda78;
      }
      .scrollFd {
        flex: 1;
        text-align: left;
        color: #30d08a;
      }
      .scrollNumber {
        padding-right: 12px;
        font-size: 16px;
        font-weight: 900;
        color: #fbe671;
        overflow: hidden;
        text-align: right;
        width: 100px;
      }
    }
  }
}
</style>
    